<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    append-to-body
    class="dialog-sm"
    top="30px"
    width="80%"
  >
    <div
      v-if="!isUserBusiness && !isUserAccount && !isCorp"
      class="p-5 text-center text-muted border rounded bg-light"
    >
      暂无任务
    </div>
    <el-tabs v-model="active">
      <el-tab-pane label="保费缴纳" name="arrival" v-if="isUserBusiness || isCorp">
        <task-fee-arrival></task-fee-arrival>
      </el-tab-pane>
      <el-tab-pane label="到账确认" name="feelpay" v-if="isUserAccount || isCorp">
        <task-fee-pay-dialog></task-fee-pay-dialog>
      </el-tab-pane>
      <el-tab-pane label="支付确认" v-if="cityOrProvince && (isUserAccount || isCorp)">
        <task-payment></task-payment>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import TaskFeeArrival from '@/credit/views/city/index/myTask/TaskFeeArrival'
import TaskFeePayDialog from '@/credit/views/county/index/myTask/TaskFeePayDialog'
import TaskPayment from '@/credit/views/city/index/myTask/TaskPayment'
import { mapGetters } from 'vuex'
export default {
  components: {
    TaskFeeArrival,
    TaskFeePayDialog,
    TaskPayment,
  },
  props: {
    visible: Boolean,
    type: String,
  },
  data() {
    return {
      active: 'noInvest',
    }
  },
  computed: {
    ...mapGetters(['job', 'user']),
    cityOrProvince() {
      return +this.user.orgRegionLever < 3
    },
    // 公司负责人看所有
    isCorp() {
      return this.job === 'org_corp' || this.job === 'org_credit_super'
    },
    // 业务部
    isUserBusiness() {
      return ['org_c_manage', 'org_c_emp'].includes(this.job)
    },
    // 账务部
    isUserAccount() {
      return ['org_f_manage', 'org_f_emp'].includes(this.job)
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.active = this.isUserAccount ? 'feelpay' : 'arrival'
      }
    },
  },
  mounted() {},
  created() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped></style>
